<!--
 * @description 导航组件-顶部导航样式1
 * @author dumeng
 * @date 2022/11/25
 -->
<template>
  <div
    class="navigation-one-page"
    :style="{'height': height >= bgHeight ? height : bgHeight,'position': isFixed==='1' && isInitData ? 'absolute' :undefined,'top': top, 'background-image': `url(${bgImage})`,'background-repeat': 'no-repeat', 'background-size': `100% ${bgHeight}`}"
  >
    <!--    <van-image v-if="bgImage" :height="bgHeight" class="bg-image" :src="bgImage" :fit="imgType">
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
      <template v-slot:error>
        <img src="../../images/base/error-icon.png" alt>
      </template>
    </van-image>-->
    <van-tabs
      v-model="id"
      :background="bgcolor"
      :title-inactive-color="textcolor"
      :title-active-color="currentcolor"
      :style="{'height': height}"
      :color="`${currentcolor ? currentcolor : ''}`"
      :ellipsis="false"
      @click="handleChange"
    >
      <van-tab
        v-for="(item,index) in list"
        v-if="item.show"
        :key="index"
        :style="{'color': textcolor}"
        :title="item.name"
        :name="item.id"
      />
    </van-tabs>

  </div>
</template>

<script>
import mixins from './../mixins'
import { v4 as uuidv4 } from 'uuid'

export default {
  name: 'NavigationOne',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    varInfo: {
      type: Object,
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: '',
      list: [
        {
          name: '导航一',
          show: true,
          id: uuidv4()
        },
        {
          name: '导航二',
          show: true,
          id: uuidv4()
        },
        {
          name: '导航三',
          show: true,
          id: uuidv4()
        },
        {
          name: '导航四',
          show: true,
          id: uuidv4()
        }
      ]
    }
  },
  computed: {
    height() {
      return this.px2rem(this.option.height || 88)
    },
    bgcolor() {
      return this.option.bgcolor || '#fff'
    },
    bgImage() {
      return this.option.bgImage
    },
    bgHeight() {
      return this.px2rem(this.option.bgHeight || 260)
    },
    textcolor() {
      return this.option.textcolor || '#333'
    },
    currentcolor() {
      return this.option.currentcolor || ''
    },
    isFixed() {
      return this.option.isFixed || ''
    }
  },
  created() {
    if (this.isInitData) {
      this.initData()
    }
  },
  methods: {
    /**
     * 导航栏切换
     */
    handleChange() {
      const info = this.list.find(item => {
        return item.id === this.id
      })
      if (Object.keys(info).length) {
        this.goPage(info)
      }
    },
    /**
     * 跳转页面
     * @param info
     */
    goPage(info) {

    },
    setData(result) {
      console.log('result', result)
      this.list = this.addId(result.navigationOne?.data || [])
    },
    addId(list) {
      if (!list || list.length === 0) {
        return []
      }
      console.log('list', list)
      list.forEach(item => {
        if (!item.id) {
          item.id = uuidv4()
        }
        // if (item.type === '1' && item.path === this.$route.fullPath) {
        //   this.id = item.id
        // }
      })
      this.id = list[0].id
      return list
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';

.navigation-one-page {
  position: relative;
  left: 0;
  right: 0;

  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .van-tabs {
    .van-tab {
      font-size: rem(28);

      &.van-tab--active {
        font-size: rem(32);
      }
    }

    .van-tabs__line {
      width: rem(38) !important;
      height: rem(6);
      position: absolute;
      left: 0;
      z-index: 1;
      bottom: rem(40);
      border-radius: rem(6);
    }
  }
}
</style>
